<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>音频转文字 Demo</title>
</head>

<body>
  <h1>音频转文字 Demo</h1>
  <p>请讲中文，我将尝试识别你的话：</p>
  <div id="transcript"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const transcriptDiv = document.getElementById('transcript');

      if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
        const recognition = new webkitSpeechRecognition();
        recognition.lang = 'zh-CN'; // 设置识别的语言为中文
        recognition.interimResults = false; // 只返回最终结果

        // 开始语音识别
        recognition.start();

        // 监听结果
        recognition.onresult = event => {
          const last = event.results.length - 1;
          const text = event.results[last][0].transcript;
          transcriptDiv.textContent += text + ' ';
          // 这里可以将识别的文本显示在页面上或进行其他处理
        };

        // 监听错误
        recognition.onerror = event => {
          console.error('语音识别错误:', event.error);
        };

        // 结束语音识别
        recognition.onend = () => {
          recognition.stop();
        };
      } else {
        transcriptDiv.textContent = '抱歉，你的浏览器不支持语音识别。';
      }
    });


  </script>
</body>

</html>